<!-- 具体页面结构 -->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <el-row style="height:60px">
              <el-button icon="el-icon-plus" size="small" type="primary" @click="addFn">新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table :data="rolesList">
              <el-table-column label="序号" type="index" :index="indexID" width="120" />
              <el-table-column prop="name" label="角色名称" width="240" />
              <el-table-column prop="description" label="描述" />
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="small" type="success" @click="AssignFn(scope)">分配权限</el-button>
                  <el-button size="small" type="primary" @click="editRole(scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="delRole(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-row type="flex" justify="center" align="middle" style="height: 60px">
              <!-- 分页组件 -->
              <el-pagination
                layout="prev,pager,next"
                :total="total"
                :current-page.sync="currPage"
                :page-size="pageInfo.pagesize"
                @current-change="CurrentChange"
              />
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <el-dialog
      :title="isEdit ? '编辑角色' : '新增角色'"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="CloseFn"
    >
      <el-form ref="form" :model="formData" label-width="100px" :rules="rules">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="formData.description" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRoleFn">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="分配权限(一级页面查看权限-二级按钮操作权限)"
      :visible.sync="showAssign"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <AssignPermission :id="cid" ref="APM" @close="assCloseFn" @assSuccess="assSuccessFn" />
    </el-dialog>
  </div>
</template>
<script>
import { getRolesAPI, delRolesAPI, addRoleAPI, changeRoleAPI } from '@/api/setting.js'
import AssignPermission from './components/assignPermission.vue'
export default {
  components: {
    AssignPermission
  },
  data() {
    return {
      pageInfo: {
        page: 1,
        pagesize: 3
      },
      formData: {
        name: '',
        description: ''
      },
      showAssign: false,
      currPage: 1,
      rules: {
        name: [{ required: true, message: '角色名称不能为空！', trigger: 'blur' }],
        description: [{ required: true, message: '角色描述不能为空！', trigger: 'blur' }]
      },
      cid: '',
      rolesList: [],
      formVisible: false,
      total: 0,
      isEdit: false
    }
  },
  computed: {
    isFull() {
      return this.total % this.pageInfo.pagesize === 0
    },
    maxPage() {
      return Math.ceil(this.total / this.pageInfo.pagesize)
    }
  },
  created() {
    this.getgetRoles()
  },

  methods: {
    assSuccessFn() {
      this.showAssign = false
      this.getgetRoles()
    },
    assCloseFn() {
      this.showAssign = false
    },
    AssignFn(val) {
      this.cid = val.row.id
      console.log(this.cid)
      this.$nextTick(() => {
        this.$refs.APM.getRoleDetail()
      })

      this.showAssign = true
    },
    CloseFn() {
      this.formData.description = ''
      this.formData.id = ''
      this.formData.name = ''
      this.$refs.form.resetFields()
    },
    editRole(val) {
      console.log(val)
      this.isEdit = true
      this.formData = { ...val }
      this.formVisible = true
    },
    async changeRole() {
      const res = await changeRoleAPI(this.formData)

      this.getgetRoles()
      console.log(res)
    },
    addFn() {
      this.formVisible = true
    },
    async addRole() {
      const res = await addRoleAPI(this.formData)
      this.isFull ? (this.pageInfo.page = this.maxPage + 1) : (this.pageInfo.page = this.maxPage)

      this.getgetRoles()
      this.formVisible = false
      console.log(res)
    },
    addRoleFn() {
      console.log(this.$refs)
      this.$refs.form.validate(val => {
        if (val) {
          this.isEdit ? this.changeRole() : this.addRole()
        }
      })
    },
    indexID(index) {
      return (index = this.pageInfo.page * this.pageInfo.pagesize - (this.pageInfo.pagesize - 1) + index)
    },
    async getgetRoles() {
      const res = await getRolesAPI(this.pageInfo)
      this.rolesList = res.data.rows
      this.total = res.data.total
      this.currPage = this.pageInfo.page
      console.log(res)
    },
    CurrentChange(page) {
      this.pageInfo.page = page
      this.getgetRoles()
    },
    async del(val) {
      const res = await delRolesAPI(val)

      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      console.log(res)
    },
    async delRole(val) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.del(val)
          if (this.rolesList.length === 1) {
            this.pageInfo.page--
          }
          this.getgetRoles()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
